<template>
  <el-card>
    <el-row>
      <el-col :span="6">
        <div class="left">
          <div><el-image style="float:left;width:200px; height: 200px" :src="SERVER_ADDR+'/goods/pic/'+goodsInfo.picList[0].url"/></div>
          <div style="margin-left:290px;width: 300px;margin-top: 15px" ><el-link @click="detail(goodsInfo.id)"> <span
              style="font-size: 25px;margin-right: 10px;color: #ff4949">{{goodsInfo.name}}</span></el-link></div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="right">
          <div v-if="commentList1.length === 0">
            <span style="font-size: 20px;color: #ff4949">评分：</span><el-rate v-model="score" :colors="colors" size="large" allow-half clearable show-score score-template="{value} 分"/>
          </div>
          <span style="font-size: 20px">评价：</span>
          <div  style="border: 1px solid #ccc;margin-top: 15px">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="content"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
            />
          </div>
          <div v-if="commentList1.length === 0">
            <span>是否匿名：</span>
            <el-radio-group v-model="status">
              <el-radio value="1" ><span>匿名</span> </el-radio>
              <el-radio value="0" ><span>实名</span> </el-radio>
            </el-radio-group>
          </div>
          <div v-else>
            <span>是否匿名：</span>
            <el-radio-group v-model="status">
              <div v-if="commentList.status === 1">
                <el-radio :label="1" checked disabled><span >匿名</span> </el-radio>
                <el-radio :label="0"  disabled><span>实名</span> </el-radio>
              </div>
              <div v-if="commentList.status === 0">
                <el-radio :label="1"   disabled><span >匿名</span> </el-radio>
                <el-radio :label="0" checked disabled><span>实名</span> </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-card style="margin-top: 10px;text-align: center">
    <el-button type="danger" class="large-btn" @click="insert">发表</el-button>
  </el-card>
</template>

<script setup>
import {useRoute} from "vue-router";
import goodsApi from "@/api/goodsApi.js";
import { onBeforeUnmount, ref, shallowRef} from "vue";
import commentApi from "@/api/commentApi.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {useTokenStore} from "@/stores/token.js";
import {useUserStore} from "@/stores/user.js";
import userApi from "@/api/userApi.js";

//获取用户信息
const user=ref({
  id:null,
  username:'',
  password:'',
  payPassword:'',
  realname:'',
  sex:'',
  idCard:'',
  phone:'',
  email:'',
  regTime:'',
  money:'',
  status:'',
});
function getInfo(){
  userApi.getInfo()
      .then(resp => {
        user.value = resp.data;
        console.log(resp.data,"user")
      })
}
getInfo();

const tokenStore =useTokenStore();
const route = useRoute();
const goodsInfo=ref({
  name:'',
  picList:[
    {
      url:''
    }
  ]
});
const commentList = ref({})
const commentList1 = ref([])
const infoStore=useUserStore();
function searchAllComment(){
  const condition={
    goodsId: route.query.goodsId,
    parentId:0,
    userId:infoStore.user.id
  }
  commentApi.selectByCondition(condition)
      .then(resp=>{
        commentList.value=resp.data[0];
        commentList1.value = resp.data;
        if(commentList.value != null){
          status.value=resp.data[0].status == 0 ? 0:resp.data[0].status;
        }
        console.log(commentList.value,"vsvsv")
      })
}
searchAllComment();

const score=ref(0)
const content=ref("");
const status = ref( );

const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode= ref('default')

const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF:{
    uploadImage:{
      server: `${SERVER_ADDR.value}/goods/upload`,
      fieldName:'pic',
      headers:{
        token:tokenStore.tokenStr
      },
      customInsert(resp, insertFn) {                  // JS 语法
        // resp 即服务端的返回结果
        let url = `${SERVER_ADDR.value}/goods/pic/${resp.data}`
        // 从 resp 中找到 url poster ，然后插入视频
        insertFn(url);
      },
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
//添加评价
function insert(){
  const comment={
    goodsId:route.query.goodsId,
    score:score.value,
    content:content.value,
    status:status.value
  }
  console.log(comment.goodsId,comment.score,comment.content,comment.status,5555555555)
  commentApi.insert(comment)
      .then(resp=>{
        if (resp.code===10000){
          ElMessage.success(resp.msg);
          router.push("/user/orderList")
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//跳转到具体商品
function detail(id) {
  router.push(`/user/goods?id=${id}`);
}

function findGoods(){
  goodsApi.selectById(route.query.goodsId)
      .then(resp=>{
        goodsInfo.value=resp.data;
        console.log(resp.data,"11121")
      })
}
findGoods();
</script>

<style scoped>

.right{
  margin-top: 70px;
}
.right span{
  font-size: 16px;
  font-weight: bold;
  padding: 20px 0;
}
.large-btn{
  font-size:16px;
  padding: 20px 60px;
}

/*水印文字*/
.watermark-container {
  position: relative;
  --prefix: '欢迎 ';
  --suffix: ' 来到智能商城平台';
}

.watermark-container::before {
  content: var(--prefix) attr(data-content) var(--suffix);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  transform: rotate(-45deg);
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  background-color: rgba(255,255,255,0.1);
  pointer-events: none;
}
</style>